<!--排名柱状图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'
  import RankingBarChart from "./RankingBarChart"

  const _this = {
    name: 'RankingBarChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          title: PnDesigner.buildTitleConfigData(),
          grid: PnDesigner.buildGridConfigData({
            left: -20,
            right: 0,
            top: 20,
            bottom: 0
          }),
          yAxis: {
            inverse: true,
            axisLabel: {
              margin: 70,
              textStyle: {
                color: '#fff',
                fontSize: 12
              },
              rankingLabel: {
                color: '#fff',
                fontSize: 9,
                width: 16,
                height: 16,
                highlight: {
                  count: 3,
                  backgroundColor: '#f0515e'
                },
                other: {
                  backgroundColor: 'rgba(41,98,255,1)'
                }
              }
            }
          },
          series: {
            barMaxWidth: 16,
            label: {
              color: '#fff',
              fontSize: 12,
              formatter: '{c}%'
            },
            color: {
              highlight: {
                color: '',
                startColor: '#f0515e',
                endColor: '#ff9800'
              },
              other: {
                color: '',
                startColor: '',
                endColor: ''
              }
            }
          }
        }

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [
          {
            field: 'name',
            remark: '类目'
          },
          {
            field: 'value',
            remark: '值'
          }
        ],
        ds_resultObj: [
          {
            name: '南宁',
            value: 20
          }, {
            name: '柳州',
            value: 15
          }, {
            name: '桂林',
            value: 32
          }, {
            name: '梧州',
            value: 45
          }, {
            name: '北海',
            value: 45
          }, {
            name: '防城港',
            value: 45
          }, {
            name: '钦州',
            value: 60
          }, {
            name: '贵港',
            value: 26
          }, {
            name: '玉林',
            value: 84
          }, {
            name: '百色',
            value: 39
          }
        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration([
        PnDesigner.buildFuncCompInteractionStreamItem('itemClick', [
          PnDesigner.buildFuncCompInteractionFieldsMapItem('name', '', '类目'),
          PnDesigner.buildFuncCompInteractionFieldsMapItem('value', '', '值')
        ])
      ]))
    },
    data() {
      return {}
    },
    mounted() {
      this.init();

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.launchInteractionStream)
        });
      },

      launchInteractionStream (params) {
        this.$PnDesigner.launchInteractionStream(this.component.compConfigData, 'itemClick', params.data)
      }
    },
    computed: {
      chartOption () {

        let yData = [];
        let barData = this.$PnUtil.deepClone(this.runCustomFilter(this.component.compConfigData.ds_resultObj));
        barData = barData.sort(function(a, b) {
          return b.value - a.value;
        });
        for (let j = 0; j < barData.length; j++) {
          if (j < 10) {
            yData.push('0' + j + barData[j].name);
          } else {
            yData.push(j + barData[j].name);
          }
        }

        let option = {
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          grid: PnDesigner.buildGridChartOption(this.component.compConfigData.chartOption.grid),
          xAxis: {
            show: false
          },
          yAxis: {
            type: 'category',
            inverse: this.component.compConfigData.chartOption.yAxis.inverse,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              margin: this.component.compConfigData.chartOption.yAxis.axisLabel.margin,
              textStyle: {
                color: this.component.compConfigData.chartOption.yAxis.axisLabel.textStyle.color,
                align: 'left',
                fontSize: this.component.compConfigData.chartOption.yAxis.axisLabel.textStyle.fontSize
              },
              rich: {
                a: {
                  color: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.color,
                  fontSize: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.fontSize,
                  backgroundColor: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.highlight.backgroundColor,
                  width: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.width,
                  height: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.height,
                  align: 'center',
                  borderRadius: 2
                },
                b: {
                  color: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.color,
                  fontSize: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.fontSize,
                  backgroundColor: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.other.backgroundColor,
                  width: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.width,
                  height: this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.height,
                  align: 'center',
                  borderRadius: 2
                }
              },
              formatter: (params) => {
                if (parseInt(params.slice(0, 2)) < this.component.compConfigData.chartOption.yAxis.axisLabel.rankingLabel.highlight.count) {
                  return [
                    '{a|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
                  ].join('\n')
                } else {
                  return [
                    '{b|' + (parseInt(params.slice(0, 2)) + 1) + '}' + '  ' + params.slice(2)
                  ].join('\n')
                }
              }
            },
            data: yData
          },
          series: [{
            type: 'bar',
            roam: false,
            visualMap: false,
            barMaxWidth: this.component.compConfigData.chartOption.series.barMaxWidth,
            barGap: 0,
            itemStyle: {
              normal: {
                color: (params) => {
                  let colorList = [{
                    colorStops: [{
                      offset: 0,
                      color: this.component.compConfigData.chartOption.series.color.highlight.startColor
                    }, {
                      offset: 1,
                      color: this.component.compConfigData.chartOption.series.color.highlight.endColor
                    }]
                  },
                    {
                      colorStops: [{
                        offset: 0,
                        color: this.component.compConfigData.chartOption.series.color.other.startColor ?
                            this.component.compConfigData.chartOption.series.color.other.startColor : this.currentEchartThemeColors[0]
                      }, {
                        offset: 1,
                        color: this.component.compConfigData.chartOption.series.color.other.endColor ?
                            this.component.compConfigData.chartOption.series.color.other.endColor : this.currentEchartThemeColors[7]
                      }]
                    }
                  ];
                  if (params.dataIndex < 3) {
                    return this.component.compConfigData.chartOption.series.color.highlight.color ?
                        this.component.compConfigData.chartOption.series.color.highlight.color : colorList[0]
                  } else {
                    return this.component.compConfigData.chartOption.series.color.other.color ?
                        this.component.compConfigData.chartOption.series.color.other.color : colorList[1]
                  }
                },
                barBorderRadius: [0, 15, 15, 0]
              }
            },
            label: {
              show: true,
              color: this.component.compConfigData.chartOption.series.label.color,
              fontSize: this.component.compConfigData.chartOption.series.label.fontSize,
              // textBorderColor: this.component.compConfigData.chartOption.series.label.textBorderColor,
              // textBorderWidth: this.component.compConfigData.chartOption.series.label.textBorderWidth,
              formatter: this.component.compConfigData.chartOption.series.label.formatter
            },
            data: barData.sort((a, b) => {
              return b.value - a.value;
            })
          }]
        };

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
